<template>
  <div class="login">
    <div class="login-container">
      <div class="login-ad">
        <img src="@/assets/images/login_ad.png" />
      </div>
      <div class="login-box">
        <div class="login-header">
          <h2>登录</h2>
        </div>
        <ul class="login-methods">
          <li
            v-for="method in loginMethods"
            :key="method.value"
            :class="[method.value, { active: method.value === loginMethod }]"
            @click="switchLoginMethod(method)"
          >
            {{ method.label }}
          </li>
        </ul>
        <login-form :method="loginMethod" @submit="login" :loding="loginLoading" />
        <div class="login-tool">
          <p>没有账号？<router-link to="/auth/register">去注册</router-link></p>
          <!-- <p>忘记密码</p> -->
        </div>
        <geetest-captcha ref="geetestCom" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import useUserStore from '@/stores/user'
import { useRouter, useRoute, RouterLink } from 'vue-router'
import { ElMessage } from 'element-plus'
import LoginForm from './components/Form/index'
import { Role_Enum } from '@/common/enum'
import useEnterpriseStore from '@/stores/enterprise'
import GeetestCaptcha from '@/components/GeetestCaptcha'
import { Role_Center_Host } from '@/common/enum'
import { getToken } from '@/common/auth'
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const returnUrl = route.query?.returnUrl
const loginRole = route.query?.loginRole
const loginLoading = ref(false)
const geetestCom = ref()
const isLogin = !!getToken()
if (isLogin) {
  userStore.getUserInfo().then(() => {
    loginAfter()
  })
}

const loginMethods = computed(() => {
  return [
    {
      label: '密码',
      value: 'ap',
      isOpen: true,
    },
    {
      label: '验证码',
      value: 'code',
      isOpen: false,
    },
    {
      label: '口令',
      value: 'password',
      isOpen: false,
    },
  ].filter((item) => item.isOpen)
})
const loginMethod = ref('ap')
const switchLoginMethod = (method) => {
  loginMethod.value = method.value
}

const login = async (data) => {
  const geetestRes = await geetestCom.value.validate()
  if (!geetestRes) return ElMessage.error('请完成验证')
  userStore
    .login(data)
    .then(async () => {
      await userStore.getUserInfo()
      ElMessage.success('登录成功')
      loginAfter()
    })
    .catch(() => {
      ElMessage.error('登录失败')
    })
}

const loginAfter = () => {
  // 携带returnUrl 直接回returnUrl
  if (returnUrl) {
    location.href = returnUrl
    return
  }
  if (userStore.isVisitor) {
    router.push(`/auth/role${loginRole ? `?loginRole=${loginRole}` : ''}`)
    return
  }
  if (!userStore.user.enterpriseId) {
    router.push(`/auth/bind${loginRole ? `?loginRole=${loginRole}` : ''}`)
  }
  const roles = userStore.roles.filter((role) => role.roleId !== Role_Enum.sys_visitor)
  if (roles.length === 1) {
    const role = roles?.[0]
    const centerHost = Role_Center_Host[role?.roleName]
    centerHost && (location.href = centerHost)
    return
  }
  router.push('/auth/role')
}
</script>

<style lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  &-ad {
    width: 550px;
    height: 705px;
    > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  &-container {
    display: flex;
    min-height: 538px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  &-box {
    width: 650px;
    padding: 40px 60px;
  }
  &-header {
    margin-bottom: 16px;
    > h2 {
      font-size: 24px;
      font-weight: 500;
      line-height: 32px;
      text-align: center;
      color: #333;
    }
  }
  &-methods {
    display: flex;
    margin-bottom: 32px;
    > li {
      position: relative;
      margin-right: 40px;
      font-size: 18px;
      cursor: pointer;
      padding: 10px 0;
      &.active {
        color: var(--el-color-primary);
      }
      &.active::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        height: 3px;
        width: 100%;
        background-color: var(--el-color-primary);
      }
      &:hover {
        color: var(--el-color-primary);
      }
    }
  }
  &-tool {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    a {
      text-decoration: none;
      color: var(--el-color-primary);
    }
  }
}
</style>
